/**
 * SpaceColorPicker 组件
 * 功能：提供可视化的空间颜色选择（推荐色 + 颜色轮盘 + 自定义HEX输入）
 * 用法示例：
 * <SpaceColorPicker value={color} onChange={(c)=>setColor(c)} />
 */
// 引入 React 库和状态管理
import React, {useState} from 'react';
// 引入类名合并工具函数
import {cn} from '@/lib/utils';
// 引入推荐颜色常量
import {RECOMMENDED_SPACE_COLORS} from '@/lib/spaceIcons';
// 引入react-colorful颜色轮盘组件
import {HexColorPicker} from 'react-colorful';

// 定义组件 Props 接口（空间颜色选择器属性）
export interface SpaceColorPickerProps {
    // 当前选中的颜色值（HEX 格式 #rrggbb 或 #rgb）
    value: string;
    // 颜色变更回调函数（向父组件传递新颜色）
    onChange: (color: string) => void;
    // 是否禁用交互（可选）
    disabled?: boolean;
    // 额外自定义类名（可选）
    className?: string;
    // 最近使用的颜色列表（可选，最新在前）
    recentColors?: string[];
}

/**
 * SpaceColorPicker 组件实现
 * 提供推荐颜色点击选择 + 颜色轮盘选择 + 输入框手动输入 HEX 颜色 + 最近使用颜色展示
 * 包含轮盘展开/折叠状态管理
 */
export const SpaceColorPicker: React.FC<SpaceColorPickerProps> = ({
    // 解构当前颜色值
    value,
    // 解构回调函数
    onChange,
    // 解构禁用标记
    disabled,
    // 解构附加类名
    className,
    // 解构最近颜色（可选）
    recentColors = []
}) => {
    // 颜色轮盘展开状态
    const [isColorWheelExpanded, setIsColorWheelExpanded] = useState(false);
    // 输入框变更事件处理函数
    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        // 读取输入值并去除首尾空格
        const v = e.target.value.trim();
        // 使用正则匹配合法 HEX（# + 3 或 6 位十六进制字符）
        if (/^#([0-9a-fA-F]{3}){1,2}$/.test(v)) {
            // 符合格式触发上层变更回调（统一转小写）
            onChange(v.toLowerCase());
        } else {
            // 不合法时不更新（允许继续输入，避免打断用户）
        }
    };
    // 计算去重后的最近颜色（排除已在推荐列表中的重复项按顺序保留）
    const filteredRecent = recentColors.filter(c => !RECOMMENDED_SPACE_COLORS.includes(c.toLowerCase()));
    // 返回渲染结构（JSX）
    return (
        // 最外层容器：垂直排列 + 间距
        <div className={cn('flex flex-col gap-4', className)}>
            {/* 自定义颜色输入行 */}
            <div className="flex items-center gap-2">
                {/* 当前颜色预览方块 */}
                <div
                    // 固定尺寸预览框
                    className="w-8 h-8 rounded-md border"
                    // 使用当前选中颜色作为背景
                    style={{backgroundColor: value}}
                    // 辅助功能：ARIA 标签
                    aria-label="当前颜色预览"
                />
                {/* HEX 输入框 */}
                <input
                    // 文本输入类型
                    type="text"
                    // 受控绑定值
                    value={value}
                    // 绑定输入事件处理器
                    onChange={handleInputChange}
                    // 是否禁用输入
                    disabled={disabled}
                    // 占位提示示例
                    placeholder="#2563eb"
                    // 输入框样式：复用 input 基础类 + 等宽字体方便编辑
                    className={cn(
                        'flex-1 input px-3 py-2 h-9',
                        'font-mono text-sm'
                    )}
                />
            </div>
            {/* 颜色轮盘区域 */}
            <div className="flex flex-col gap-2">
                <div className="flex items-center gap-2">
                    <span className="text-[11px] font-medium text-gray-500 tracking-wide">颜色轮盘</span>
                    <button
                        type="button"
                        onClick={() => setIsColorWheelExpanded(!isColorWheelExpanded)}
                        disabled={disabled}
                        className={cn(
                            'text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 transition-colors',
                            disabled && 'opacity-50 cursor-not-allowed'
                        )}
                        aria-expanded={isColorWheelExpanded}
                        aria-label={isColorWheelExpanded ? "折叠颜色轮盘" : "展开颜色轮盘"}
                    >
                        {isColorWheelExpanded ? "收起" : "展开"}
                    </button>
                </div>
                {/* 颜色轮盘容器（展开时显示） */}
                {isColorWheelExpanded && (
                    <div className="p-3 border border-gray-200 rounded-lg bg-gray-50">
                        <HexColorPicker
                            color={value}
                            onChange={onChange}
                            className="w-full max-w-[200px] mx-auto"
                        />
                    </div>
                )}
            </div>
            {/* 最近使用颜色区域（存在时显示） */}
            {filteredRecent.length > 0 && (
                <div className="flex flex-col gap-2">
                    <span className="text-[11px] font-medium text-gray-500 tracking-wide">最近使用</span>
                    <div className="flex flex-wrap gap-2">
                        {filteredRecent.slice(0,7).map(c => {
                            const isActive = c.toLowerCase() === value.toLowerCase();
                            return (
                                <button
                                    key={c}
                                    type="button"
                                    aria-label={`选择最近颜色 ${c}`}
                                    aria-pressed={isActive}
                                    disabled={disabled}
                                    onClick={() => onChange(c)}
                                    className={cn(
                                        'w-7 h-7 rounded-md border transition-all focus:outline-none focus:ring-2 focus:ring-offset-1',
                                        'hover:scale-105',
                                        isActive ? 'ring-2 ring-offset-1 ring-blue-500 scale-110' : 'ring-transparent',
                                        disabled && 'opacity-50 cursor-not-allowed'
                                    )}
                                    style={{backgroundColor: c}}
                                />
                            );
                        })}
                    </div>
                </div>
            )}
            {/* 推荐颜色网格区域 */}
            <div className="flex flex-col gap-2">
                <span className="text-[11px] font-medium text-gray-500 tracking-wide">推荐颜色</span>
                <div className="grid grid-cols-7 gap-2">
                    {/* 遍历推荐颜色数组生成方块按钮 */}
                    {RECOMMENDED_SPACE_COLORS.map((c) => {
                        // 判断当前颜色是否被选中（忽略大小写）
                        const isActive = c.toLowerCase() === value.toLowerCase();
                        // 返回单个颜色按钮
                        return (
                            <button
                                // 使用颜色值作为 key 保证唯一
                                key={c}
                                // 声明按钮类型避免默认提交表单
                                type="button"
                                // 辅助功能：颜色名称朗读
                                aria-label={`选择颜色 ${c}`}
                                // ARIA 状态：是否当前选中
                                aria-pressed={isActive}
                                // 是否禁用按钮
                                disabled={disabled}
                                // 点击事件：调用回调更新颜色
                                onClick={() => onChange(c)}
                                // 按钮基础样式 + 动效 + 状态样式
                                className={cn(
                                    'w-7 h-7 rounded-md border transition-all focus:outline-none focus:ring-2 focus:ring-offset-1',
                                    'hover:scale-105',
                                    isActive ? 'ring-2 ring-offset-1 ring-blue-500 scale-110' : 'ring-transparent',
                                    disabled && 'opacity-50 cursor-not-allowed'
                                )}
                                // 内联背景色：展示颜色块
                                style={{backgroundColor: c}}
                            />
                        );
                    })}
                </div>
            </div>
        </div>
    );
};
